<!-- navbar -->
<template>
	<view class="">
		<view class="navbarmain">
			<view class="navbar"  :style="{'color':textColor,'background':bgColor,'backdrop-filter': `blur(${backdrop})`,}">
				<view class="backbtn" v-if="showback" @click="gotoBack">
						<uni-icons  type="left" :color="textColor" size="25"></uni-icons>
						</view>
				<view class="title" :style="{'color':textColor}">{{navbarTitle}}</view>
			</view>
			<view class="kong" v-if="iskong"></view>
		</view>
	</view>

</template>

<script setup>
	// import { defineProps, defineEmits, computed } from 'vue';
	
	const props = defineProps({
		showback: {
			type: Boolean,
			default: false
		},
		iskong: {
			type: Boolean,
			default: true 
		},
		textColor: {
			type: String,
			default: '#000'
		},
		fontSize: {
			type: String,
			default: '40'
		},
		bgColor: {
			type: String,
			default: '#f3f3f3'
		},
		backdrop:{
			type: String,
			default: '0px'
		},
		showlogo: {
			type: Boolean,
			default: false
		},
		navbarTitle: {
			type: String,
			 default: ''
		},
		isShare: {
			type: Boolean,
			default: false
		},
	})



	function gotoBack() {
		if (props.isShare) {
			wx.switchTab({
				url: "/pages/home/index",
			});
		} else {
			wx.navigateBack({
				delta: 1
			});
		}
	}




	// data: {
	// },
	// methods: {
	// }
</script>

<style scoped lang="scss">
	.navbarmain {
	
		.navbar {
				
			z-index: 999;
			width: 100vw;
			height: 170rpx;
			padding-bottom: 28rpx;
			display: flex;
			align-items: flex-end;
			padding-left: 35rpx;
			// background: #F7F3E8;
			position: fixed;
			top: 0;
			box-sizing: border-box;

			.backbtn {
				image {
					width: 25rpx;
					height: 42rpx;
				}
			}

			.logo {
				margin-left: 17rpx;

				image {
					width: 100rpx;
					height: 40rpx;
				}
			}

			.title {
				color: #ffffff;
				font-size: 32rpx;
				position: absolute;
				left: 50%;
				bottom: 30rpx;
				transform: translate(-60%);
			}
		}

	}

	.kong{
	height: 170rpx;
	width: 100%;
	}

</style>